<template>
	<!--经济发展潜力指数-->
	<div class="development-potential">
		<div class="topBox">
			<el-row>
				<el-col span="10">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart1" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="40vh" style="padding:0 1vh 1vh 0;margin-top:1vh"></chart-block>
					</div>
				</el-col>
				<el-col span="14">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="DoubleBlockLineOptionData.title" :optionData="DoubleBlockLineOptionData" chartType="getBar" height="40vh" style="padding:0 1vh 1vh 0;margin-top:1vh" titleType="blueBig"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottomBox">
			<el-col span="10">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart3" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getLine" height="42vh" style="padding:0 1vh 1vh 0"></chart-block>
				</div>
			</el-col>
			<el-col span="14">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart4" :title="BarAndLineOptionData.title" :optionData="BarAndLineOptionData" chartType="getBarLine" height="42vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>
				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
import {getPotentialData, getPotentialData1, getPotentialData2, getPotentialData3} from '@/api/pages.js'

export default {
	name: "development-potential",
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	props: {},
	data() {
		return {
			optionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			DoubleBlockLineOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				BarGradientColor: [//柱状图渐变色
					{
						topColor: '#0DCCFF',
						bottomColor: '#4760FF'
					},
					{
						topColor: '#47FF72',
						bottomColor: '#E587FE'
					},
				],
				lineColor: {
					linearColor: '#FF9F15',//线条颜色
					radiusColor: '#FF9F15',//折线点颜色
					borderColor: '#a6660d',//折线点边框颜色
				}
			},
			pictorialBarOptionData: {
				color:['#32e9f4','#f1db25','#fc684b'],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#F1DB25',
						bottomColor: '#3BE1FF'
					},
				],
			},
			BarAndLineOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#59FFCA',
						bottomColor: '#0DCCFF'
					},
				],
				LineCircleColor: "#47FF72",//折线图颜色
				LineCircleBorderColor: "#444",//折线图描边颜色
			},
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		this.getPotentialData('E043')
		this.getPotentialData1('E044')
		this.getPotentialData2('E045')
		this.getPotentialData3('E046')
	},
	methods: {
		// 经济指标挖掘分析-经济发展潜力指数-三次产业增加值变化
		getPotentialData(busiCode) {
			getPotentialData(busiCode).then(res => {
				if (res.data.code === 200) {
					this.optionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						color: ["#00aa7f", "#03cefa", "#f1db25"],
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-经济发展潜力指数-规模企业数据变化
		getPotentialData1(busiCode) {
			getPotentialData1(busiCode).then(res => {
				if (res.data.code === 200) {
					this.DoubleBlockLineOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis,
						seriesData: res.data.data.seriesData,
						isLine: true,//是否需要折线，需要折线的话在seriesData需要新增一个{}
						LinearGradientColor: [//柱状图渐变色
							{
								topColor: '#0DCCFF',
								bottomColor: '#4760FF'
							},
							{
								topColor: '#47FF72',
								bottomColor: '#E587FE'
							},
						]
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-经济发展潜力指数-教育数据变化
		getPotentialData2(busiCode) {
			getPotentialData2(busiCode).then(res => {
				if (res.data.code === 200) {
					this.pictorialBarOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						color:['#32e9f4','#f1db25','#fc684b'],
					}
					console.log(this.pictorialBarOptionData)
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-经济发展潜力指数-科学技术数据变化
		getPotentialData3(busiCode) {
			getPotentialData3(busiCode).then(res => {
				if (res.data.code === 200) {
					this.BarAndLineOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis,
						seriesData: res.data.data.seriesData,
						LinearGradientColor: [//柱状图渐变色
							{
								topColor: '#59FFCA',
								bottomColor: '#0DCCFF'
							},
						],
						LineCircleColor: "#eae73c",//折线图颜色
						LineCircleBorderColor: "#eae73c",//折线图描边颜色
					}
				}
			}).catch(err => {

			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.development-potential {
	width: 100%;
	height: 100%;

	.topBox {
		width: 100%;
		height: 49%;
	}

	.bottomBox {
		width: 100%;
		height: 49%;
		margin-top: 1.5vh
	}
}
</style>
